<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时应用</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <style>
        .timer {
            border: 1px solid #000; /* 添加表框 */
            padding: 10px; /* 设置内边距 */
            margin-bottom: 10px; /* 设置底部外边距 */
        }
        .timer:nth-child(odd) {
            background-color: lightblue; /* 单数行浅蓝色背景 */
        }
        .timer:nth-child(even) {
            background-color: lightyellow; /* 双数行浅黄色背景 */
        }
    </style>
</head>
<body>
	<a href="{{ url_for('tgindex') }}">计算器</a>
	<button onclick="window.location.href='{{ url_for('tgindex') }}'">计算器</button> 
    <h1>随便写的倒计时应用</h1>

    <form id="timerForm" action="/add_timer" method="post">
        <label for="duration">倒计时时长（分钟）：</label>
        <input type="number" id="duration" name="duration" required>

        <label for="note">备注：</label>
        <input type="text" id="note" name="note" required>

        <button type="submit">添加倒计时</button>
    </form>

    <div id="timersList">
        {% for timer in timers %}
            <div class="timer" id="timer{{ timer.id }}">
                <span class="note">{{ timer.note }}&nbsp;&nbsp;</span>
                <span class="start-time">记录时间: {{ timer.start_time }}</span>
                - <span class="next-time">下一时间点: {{ timer.next_time }}</span>
                - <span class="remaining" data-timer-id="{{ timer.id }}">{{ timer.remaining_seconds }}</span> 秒剩余
                <button type="button" onclick="resetTimer({{ timer.id }}, '{{ timer.start_time }}', {{ timer.duration }}, 'reset')">重置</button>
                <button type="button" onclick="resetTimer({{ timer.id }}, '{{ timer.start_time }}', {{ timer.duration }}, 'resetStart')" style="display: none;">重置记录时间</button>
                <button type="button" onclick="deleteTimer({{ timer.id }})">删除</button>
            </div>
        {% endfor %}
    </div>

    <script>
        function resetTimer(timerId, startTime, duration, resetType) {
            $.get('/reset_timer/' + timerId + '/' + startTime + '/' + duration + '/' + resetType, function(data) {
                if (data.success) {
                    // 更新计时器的信息
                    updateTimerInfo(timerId);
                }
            });
        }

        function deleteTimer(timerId) {
            $.get('/delete_timer/' + timerId, function(data) {
                if (data.success) {
                    // 移除计时器元素
                    $('#timer' + timerId).remove();
                }
            });
        }

        // 定时刷新每个计时器的信息
        setInterval(function() {
            $('.timer').each(function() {
                var timerId = $(this).find('.remaining').data('timer-id');
                updateTimerInfo(timerId);
            });
        }, 1000);  // 每1秒刷新一次

        function updateTimerInfo(timerId) {
            // 发送 AJAX 请求，获取更新后的计时器信息
            $.get('/timer_info/' + timerId, function(data) {
                // 更新计时器的剩余时间
                $('#timer' + timerId + ' .remaining').text(data.remaining_seconds);
                // 更新计时器的记录时间
                $('#timer' + timerId + ' .start-time').text('记录时间: ' + data.start_time);
                // 更新计时器的下一时间点
                $('#timer' + timerId + ' .next-time').text('下一时间点: ' + data.next_time);
            });
        }
    </script>
</body>
</html>